<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="TourClose"></div>
      <div class="tour">
        <div class="rele-titles"><img @click="TourClose"src="../assets/img/tub.png" alt="">编辑成交报表</div>
        <div class="tour-info">
          <!-- 客户资料 -->
          <div class="custo">

            <ul class="custo-list">
              <li>
                <div class="custo-name" style="">成交编号</div>
                <input v-model="knockdownDatas.deal_number" placeholder="请输入编号"
                          style="width: 63%;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box">
              </li>
              <li>
                <div class="custo-name">成交日期</div>
                <div class="custo-input">
                  <el-date-picker
                    v-model="knockdownDatas.deal_time"
                    type="date"
                    placeholder="选择日期" style="width: 90%; margin-top: 37px;margin-left: 10px;border: 1px solid #a0a0a0;">
                  </el-date-picker>
                </div>
              </li>
              <li>
                <div class="custo-name">成交产品</div>
                <div id="custo-input" class="custo-input">
                  <select v-model="knockdownDatas.product_id" placeholder="请选择"
                             style="width: 90%; margin-left: 10px;margin-top: 37px;border: 1px solid #a0a0a0;"class="Up_box_list">
                    <option
                      v-for="item in dataList.DealProduct"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 10px">成交项目</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.deal_project" placeholder="请输入经纪人名字"
                            style="width: 88%;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_">
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 10px">经纪人1</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.agent_one" placeholder="请输入经纪人名字"
                            style="width: 88%;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_">
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 10px">占比业绩</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.achievement_one" placeholder="请输入内容"
                            style="width: 88%; margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_">
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 15px">经纪人2</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.agent_two" placeholder="请输入经纪人名字"
                            style="width: 88%; margin-top: 53px;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_2">
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 18px">占比业绩</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.achievement_two" placeholder="请输入内容"
                            style="width: 88%; margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_2">
                </div>
              </li>
              <li>
                <!--<div class="custo-name" style="margin-top: 18px;margin-left: 10px;">楼栋</div>-->
                <!--<div class="custo-input">-->
                <!--<el-input v-model="formData.building" placeholder="请输入内容"-->
                <!--style="width: 90%; margin-top: 55px;"></el-input>-->
                <!--</div>-->
                <div class="custo-name" style="margin-top: 18px">楼栋</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.building" placeholder="请输入内容"
                            style="width: 88%; margin-top: 55px;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_2">
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 18px">房号</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.room" placeholder="请输入内容"
                            style="width: 88%; margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_3">
                </div>
              </li>

              <li>
                <div class="custo-name" style="margin-top: 28px">付款方式</div>
                <div class="custo-input">
                  <select v-model="knockdownDatas.payment_id" placeholder="请选择"
                             style="width: 90%; margin-top: 65px;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_3">
                    <option
                      v-for="item in dataList.DealPayment"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 28px">合同总额</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.total" placeholder="请输入内容"
                            style="width: 88%; margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_3">
                </div>
              </li>
            </ul>
            <ul class="custo-list">
              <li>
                <div class="custo-name" style=" margin-top: 40px; ">说明</div>
                <div class="custo-input">
                  <div class="custo-input_Up">
                    <el-input
                      type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                      v-model="knockdownDatas.desc_one">
                    </el-input>
                  </div>
                </div>
              </li>
            </ul>
            <ul class="custo-list">
              <li>
                <div class="custo-name" style="margin-top: 100px;">佣金点位</div>
                <div  class="custo-input">
                  <input v-model="knockdownDatas.commission" placeholder="请输入内容"
                            style="width: 88%;margin-left: 11px;border: 1px solid #a0a0a0;" class="Up_box_list_4">
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 100px;">成交奖励</div>
                <div  class="custo-input">
                  <input v-model="knockdownDatas.reward" placeholder="请输入内容"
                            style="width: 88%;margin-left: 11px;border: 1px solid #a0a0a0;" class="Up_box_list_4">
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 100px;">实算佣金</div>
                <div  class="custo-input">
                  <input v-model="knockdownDatas.real" placeholder="请输入内容"
                            style="width: 88%;margin-left: 11px;border: 1px solid #a0a0a0;" class="Up_box_list_4">
                </div>
              </li>
            </ul>
            <ul class="custo-list">
              <li>
                <div class="custo-name" style="margin-top: 110px;">让利佣金</div>
                <div class="custo-input">
                  <input v-model="knockdownDatas.make" placeholder="请输入内容"
                            style="width: 88%;margin-top: 145px;margin-left: 11px;border: 1px solid #a0a0a0;" class="Up_box_list_4">
                </div>
              </li>
            </ul>
            <ul class="custo-list">
              <li>
                <div class="custo-name" style=" margin-top: 125px;">说明</div>
                <div class="custo-input">
                  <div class="custo-input_box">
                    <el-input
                      type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                      v-model="knockdownDatas.desc_two">
                    </el-input>
                  </div>
                </div>
              </li>
            </ul>
            <ul class="custo-list">
              <li>
                <div class="custo-name" style="margin-top: 180px;">客户来源</div>
                <div  class="custo-input">
                  <select v-model="knockdownDatas.come_id" placeholder="请选择"
                             style="width: 88%;margin-top: 220px;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_5">
                    <option
                      v-for="item in dataList.DealCome"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 180px;">客户姓名</div>
                <div  class="custo-input">
                  <input v-model="knockdownDatas.name" placeholder="请输入客户姓名"
                            style="width: 88%;margin-top: 220px;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_5">
                </div>
              </li>
              <li>
                <div class="custo-name" style="margin-top: 180px;">客户籍贯</div>
                <div  class="custo-input">
                  <select v-model="knockdownDatas.addres" placeholder="请选择"
                             style="width: 90%;margin-top: 220px;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_5">
                    <option
                      v-for="item in proData"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
            </ul>
            <ul class="custo-list">
              <li>
                <div class="custo-name" style="margin-top: 192px;">客户电话</div>
                <div  class="custo-input">
                  <input v-model="knockdownDatas.phone" placeholder="请输入客户电话"
                            style="width: 85%;margin-left: 10px;border: 1px solid #a0a0a0;" class="Up_box_list_7">
                </div>
              </li>
            </ul>
          </div>
          <div class="primary_link">
            <el-button type="primary" @click="onSubmitReport(knockdownDatas.id)">提交</el-button>
          </div>
          <!-- 客户资料 end-->
        </div>
        <!-- 备注 -->

        <!-- 按钮 -->
      </div>
    </div>
  </div>

</template>
<script>
  export default {
    props: {
      knockdownDatas:{
        type:Object

      },
      SetHourList: {
        type: Function
      },
      LDmodal: {
        type: Function
      },
      closeTran: {
        type: Function
      },
      optionsValue: {
        type: Number
      }
    },
    data() {
      return {
        dataList: {},//下拉数据
        formData: {
          desc_one: '',
          desc_two: ''
        },

        proData: []//省份

      }
    },
    methods: {
// 父组件调用子组件的方法
      prenFunc() {
        this.getDealLiat();
        this.getProData();
      },
      TourClose() {
        this.closeTran();
      },

      //获取下拉数据接口
      getDealLiat() {
        let that = this;
        that.$http.get('/newapi/deal/list').then(res => {

          that.dataList = res.data.res;
          console.log(that.dataList );
        }).catch(err => {
          console.log(err)
        })
      },
      //获取省份
      getProData() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN'
          }
        }).then(res => {

          that.proData = res.data.res
        }).catch(err => {
          console.log(err)
        })
      },
      //提交
      onSubmitReport() {
        let that = this;

        if (that.optionsValue === 1) {
          that.knockdownDatas.premises_id = that.$store.state.areaId;
          delete that.knockdownDatas['user'];
          delete that.knockdownDatas['user_id'];

          that.$http.post('/newapi/deal/modify', that.knockdownDatas).then(res => {
            console.log(res);
            if (res.data.status === 200) {
              that.TourClose();
              that.SetHourList();
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            } else {
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          that.formData.house_id = that.$store.state.areaId;
          that.$http.post('/newapi/deal/addhouse', that.formData).then(res => {
            console.log(res);
            if (res.data.status === 200) {
              that.TourClose();
              that.SetHourList();
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            } else {
              that.$store.state.messageString = res.data.message;
              that.LDmodal();
            }
          }).catch(err => {

            console.log(err)
          })
        }
      }

    }

  }
</script>
<style scoped>

  .modal {
    position: absolute !important;
  }

  .H-p2 input {
    width: 50% !important;
    margin-right: 3px;
  }


  .H-p1 input {
    width: 60%;
    margin-right: 3px;
    padding-left: 2%;
    height: 25px;
    line-height: 25px;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
  }

  .H-p1 span {
    margin-left: 3px;
    display: inline-block;
    text-align: center;
  }

  .Houses-list li {
    width: 50%;
    height: 20px;
    margin-bottom: 10px;
    float: left;
  }

  .tour-btn {
    width: 23%;
    float: right;
    /*padding: 0 10%;*/
  }

  .tour-btn button {
    margin-top: 4px;
    width: 100px;
    height: 35px;
    background: #ed7d31;
    color: #ffffff;
    border-radius: 5px;
    float: left;
    border: none;
  }

  .tour-btn button:nth-child(2) {
    float: right;
  }


  .rema textarea {
    width: 100%;
    font-size: .9em;
    height: 60px;
    background: none;
    border: none;
  }

  .custo-list1 li input {
    width: 60%;
  }


  .custo-list1 li span {
    margin-left: 2px;
    display: inline-block;
  }


  .custo-name {
    width: 26%;
    float: left;
    line-height: 100px;
    text-align: center;
  }

  .custo-input {
    width: 70%;
    float: left;
  }


  .custo-input input {
    width: 88%;
    padding-left: 2%;
    height: 25px;
    line-height: 15px;
    font-size: .9em;
    border: 1px solid #d3d3d3;
  }

  .custo-list {
    width: 94%;
    padding: 0 5%;
    float: left;
  }

  #custo-input input {
    height: 0 !important;
  }

  button:hover {
    background: #409ee1 !important;
    color: #ffffff;
  }

  .custo-list li {
    width: 33%;
    height: 20px;
    float: left;
    margin-bottom: 10px;
  }

  .tour {
    width: 50%;
    height: 450px;
    background: #fff;
    position: absolute;
    padding-bottom: 20px;
    left: 15%;
    z-index: 10;
    top: 15%;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: auto;
  }
 select{
   cursor: pointer;
 }
 input{
   cursor: pointer;
 }
  .custo {
    width: 100%;
    float: left;
    margin-top: 50px;
    height: 543px;
    overflow: hidden;
    box-shadow: #e8e7e7 0px 0px 10px;
    background: #ffffff;
  }

  .tour-info {
    width: 100%;
    float: left;
  }

  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }

  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;
    cursor: pointer;
    border-radius: 10px;
  }
  img{
    left: 115%;
  }
  .rele-titles {
    width: 40%;
    padding: 0 .5%;
    font-size: 2em;
    line-height: 50px;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 189px;
  }

  .primary_link {
    text-align: center;
    margin-top: 30px;
  }

  .el-button--primary {
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
    margin-top: 15px;
  }
  .custo-input_Up{
    width: 82%;
    top: 52%;
    position: absolute;
    padding-left: 8px;
  }
  .custo-input_box{
    width: 82%;
    top: 89%;
    position: absolute;
    padding-left: 8px;
  }
  .Up_box{
    top: 35px;
    position: relative;
    height: 25px;
  }
  .Up_box_list{

    position: relative;
    height: 27px;
  }
  .Up_box_list_{
    position: relative;
    height: 27px;
    margin-top: 45px;
  }
  .Up_box_list_1{
    position: relative;
    height: 27px;
    margin-top: 53px;
  }
  .Up_box_list_2{
    position: relative;
    height: 27px;
    margin-top: 55px;
  }
  .Up_box_list_3{
    position: relative;
    margin-top: 60px;
    height: 27px;
  }
  .Up_box_list_4{
    margin-top: 135px;
    position: relative;
    height: 27px;
  }
  .Up_box_list_5{
    position: relative;
    height: 27px;
    margin-top: 145px;
  }
  .Up_box_list_6{
    position: relative;
    height: 27px;
    margin-top: 222px;
  }
  .Up_box_list_7{
    margin-top: 230px;
    position: relative;
    height: 27px;
  }
</style>
